<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿联想官网</title>
    <link rel="stylesheet" href="./Jsonp/kuayu.html">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../libs/swiper/swiper-bundle.min.css">
</head>

<body>
    <!--header-->
    <header>
        <div class="box1">
            <img src="../images/log.jpg" alt="">
            <ul class="header-left">
                <li>商城
                    <ul class="header-middle">
                        <li>
                            Lenovo电脑
                            <div>
                                <ul>
                                    游戏本
                                    <li>拯救者Y7000 </li>
                                    <li>拯救者Y7000</li>
                                    <li>拯救者Y7000</li>
                                    <li>拯救者Y7000</li>
                                </ul>
                                <ul>
                                    轻薄本
                                    <li>拯救者Y7000</li>
                                    <li>拯救者Y7000</li>
                                </ul>
                                <ul>
                                    便携本
                                    <li>拯救者Y7000</li>
                                    <li>拯救者Y7000</li>
                                    <li>拯救者Y7000</li>
                                </ul>
                                <ul>
                                    便携本

                                    <li>拯救者Y7000</li>
                                    <li>拯救者Y7000</li>

                                </ul>
                                <ul>
                                    游戏本

                                    <li>拯救者Y7000</li>
                                    <li>拯救者Y7000</li>
                                </ul>
                            </div>
                        </li>
                        <li>ThinkPad电脑</li>
                        <li>平板电脑</li>
                        <li>手机/通信</li>
                        <li>智能产品</li>
                        <li>配件/办公</li>
                        <li>增值服务</li>
                    </ul>
                </li>
                <li>企业购
                    <ul class="header-middle">
                        <li>
                            Lenovo电脑
                            <div>
                                <ul>
                                    游戏本
                                    <li>拯救者Y7000 </li>

                                </ul>
                                <ul>
                                    轻薄本
                                    <li>拯救者Y7000</li>
                                    <li>拯救者Y7000</li>
                                    <li>拯救者Y7000</li>
                                    <li>拯救者Y7000</li>
                                </ul>
                                <ul>
                                    便携本
                                    <li>拯救者Y7000</li>
                                    <li>拯救者Y7000</li>

                                </ul>
                                <ul>
                                    便携本

                                    <li>拯救者Y7000</li>
                                    <li>拯救者Y7000</li>

                                </ul>
                                <ul>
                                    游戏本

                                    <li>拯救者Y7000</li>

                                </ul>
                            </div>
                        </li>
                        <li>ThinkPad电脑</li>
                        <li>平板电脑</li>
                        <li>手机/通信</li>
                        <li>智能产品</li>
                        <li>配件/办公</li>
                        <li>增值服务</li>
                    </ul>
                </li>
                <li>政教及大企业
                    <ul class="header-middle">
                        <li>
                            Lenovo电脑
                            <div>
                                <ul>
                                    游戏本
                                    <li>拯救者Y7000 </li>
                                    <li>拯救者Y7000</li>

                                </ul>
                                <ul>
                                    轻薄本
                                    <li>拯救者Y7000</li>
                                    <li>拯救者Y7000</li>
                                </ul>
                                <ul>
                                    便携本
                                    <li>拯救者Y7000</li>
                                    <li>拯救者Y7000</li>

                                </ul>
                                <ul>
                                    便携本

                                    <li>拯救者Y7000</li>
                                    <li>拯救者Y7000</li>
                                    <li>拯救者Y7000</li>
                                    <li>拯救者Y7000</li>

                                </ul>
                                <ul>
                                    游戏本

                                    <li>拯救者Y7000</li>
                                    <li>拯救者Y7000</li>
                                </ul>
                            </div>
                        </li>
                        <li>ThinkPad电脑</li>
                        <li>平板电脑</li>
                        <li>手机/通信</li>
                        <li>智能产品</li>
                        <li>配件/办公</li>
                        <li>增值服务</li>
                    </ul>
                </li>
                <li>服务
                    <ul class="header-middle">
                        <li>
                            Lenovo电脑
                            <div>
                                <ul>
                                    游戏本
                                    <li>拯救者Y7000 </li>

                                </ul>
                                <ul>
                                    轻薄本
                                    <li>拯救者Y7000</li>
                                    <li>拯救者Y7000</li>
                                </ul>
                                <ul>
                                    便携本
                                    <li>拯救者Y7000</li>
                                    <li>拯救者Y7000</li>
                                    <li>拯救者Y7000</li>
                                </ul>
                                <ul>
                                    便携本

                                    <li>拯救者Y7000</li>
                                    <li>拯救者Y7000</li>

                                </ul>
                                <ul>
                                    游戏本

                                    <li>拯救者Y7000</li>
                                    <li>拯救者Y7000</li>
                                    <li>拯救者Y7000</li>
                                    <li>拯救者Y7000</li>
                                </ul>
                            </div>
                        </li>
                        <li>ThinkPad电脑</li>
                        <li>平板电脑</li>
                        <li>手机/通信</li>
                        <li>智能产品</li>
                        <li>配件/办公</li>
                        <li>增值服务</li>
                    </ul>
                </li>
                <li>品牌
                    <ul class="header-middle">
                        <li>
                            Lenovo电脑
                            <div>
                                <ul>
                                    游戏本
                                    <li>拯救者Y7000 </li>
                                    <li>拯救者Y7000</li>

                                    <li>拯救者Y7000</li>
                                </ul>
                                <ul>
                                    轻薄本
                                    <li>拯救者Y7000</li>
                                    <li>拯救者Y7000</li>
                                </ul>
                                <ul>
                                    便携本
                                    <li>拯救者Y7000</li>
                                    <li>拯救者Y7000</li>
                                    <li>拯救者Y7000</li>
                                </ul>
                                <ul>
                                    便携本

                                    <li>拯救者Y7000</li>
                                    <li>拯救者Y7000</li>

                                </ul>
                                <ul>
                                    游戏本


                                    <li>拯救者Y7000</li>
                                </ul>
                            </div>
                        </li>
                        <li>ThinkPad电脑</li>
                        <li>平板电脑</li>
                        <li>手机/通信</li>
                        <li>智能产品</li>
                        <li>配件/办公</li>
                        <li>增值服务</li>
                    </ul>
                </li>
            </ul>






            <!-- 搜索引擎 -->
            <!-- <script src="../libs/jQuery/jQuery.js"></script>
            <script src="../js/sousuoyinqing.js"></script>
            <div class="sousuo" style="color: #323232; ">
                <input id="input" />
                <button>搜索</button> -->
                <!--输入框下方的列表-->
               <!--  <ul id="ul" style="display:none;z-index: 2;">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </div> -->


            <div class="box">
                <input type="text">
                <button>搜搜</button>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                    <li>10</li>
                </ul>
            </div>
        
            <script>
                /*
                    思路分析
                        => 随着我们的输入和删除
                            -> 给 input 添加事件
                            -> 添加 input 事件
                        => 如果有我们要搜索的结果就显示出来
                        => 如果没有就隐藏
        
            
                        https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=31254,26350&wd=aiqiyi%20&req=2&csor=7&pwd=aiqiyi&cb=jQuery110207400388025052589_1651730738790&_=1651730738797
                */
        
                // 获取元素
                const inp = document.querySelector('input')
                const ulBox = document.querySelector('ul')
                inp.addEventListener('input', () => {
                    // 发送请求之前需要拿到用户输入的内容
                    let text = inp.value.trim()
                    // console.log(666);
                    // 动态创建script 标签
                    let script = document.createElement('script')
                    // 操作原生属性src
                    script.src = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=31254,26350&wd=${text}%20&req=2&csor=7&pwd=aiqiyi&cb=fun&_=1651730738797`
                    // 插入到页面中
                    document.body.appendChild(script)
                    // 只要请求发送出去就可以了
                    script.remove()
                })
        
        
                // 首先先准备一个函数
                function fun(res) {
                    // console.log(res);
                    console.log(res.g);
                    if (!res.g) return ulBox.style.display = 'none'
        
                    // 代码能执行到这里说明有内容
                    let str = ''
                    res.g.forEach(item => {
                        str += `
                        <li>${item.q}</li>
                        `
                    })
                    ulBox.innerHTML = str
                    // 让我们的ul盒子显示
                    ulBox.style.display = 'block'
                }
            </script>
        

            
            <!-- 登录注册 -->
            <ul class="header-right">
                <li><a href="../views/login.html">登录</a> | <a href="../views/register.html">注册</a></li>
            </ul>
        </div>
    </header>







    <!-- 轮播图 -->
    <script src="../libs/swiper/swiper-bundle.min.js"></script>
    <!-- Swiper 轮播图结构样式-->
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="../images/lunbo1.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="../images/lunbo2.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="../images/lunbo3.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="../images/lunbo4.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="../images/lunbo5.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="../images/lunbo6.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="../images/lunbo7.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="../images/lunbo8.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="../images/lunbo9.jpg" alt="">
            </div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-pagination"></div>
    </div>
    <!-- Initialize Swiper  轮播图初始化部分-->
    <script>
        var swiper = new Swiper(".mySwiper", {
            slidesPerView: 1,
            spaceBetween: 30,
            loop: true,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
    </script>




    <!-- 导航 -->
    <div class="nav-top">
        <ul class="ulTop banner">
            <li class="pc_0">个人及家庭产品
                <ul class="pc_ul">
                    <li>Lenovo台式机</li>
                    <li>Lenovo笔记本</li>
                    <li>ThinkPad电脑</li>
                    <li>平板</li>
                    <li>手机</li>
                    <li>选件/服务</li>
                    <li>显示器</li>
                    <li>智能产品</li>
                </ul>
            </li>
            
            <li class="pc_1">中小企业产品
                <ul class="pc_ul">
               <li>ThinkPad</li>
               <li>ThinkBook</li>
               <li>台式机</li>
               <li>扬天</li>
               <li>配件/办公</li>
               <li>会议平板</li>
               <li>服务器</li>
               <li>解决方案</li>
           </ul>
            </li>

            <li class="pc_2">政教及大企业产品
                 <ul class="pc_ul">
               <li>商用电脑</li>
               <li>商用解决方案</li>
               <li>智能基础设施产品</li>
           </ul>
            </li>

        </ul>
        <ul class="xuanran">
            <!-- 渲染部分 -->
            <li>
                <div class="box_img">
                    <img src="../images/Lenovotaishi1.jpg" alt="">
                </div>
                <p class="names">拯救者 刃7000P</p>
                <p class="pro-desc">RYZEN_7_5800/Windows 11 家庭中文版/16G (8Gx12)/512GSSD...</p>
                <p class="price"><span class="z">￥</span class="s"><span>7499</span></p>
            </li>

            <li>
                <div class="box_img">
                    <img src="../images/Lenovotaishi2.jpg" alt="">
                </div>
                <p class="names">GeekPro分体台式机</p>
                <p class="pro-desc">12代英特尔酷睿 i5-12400F/i5-12400/Windows 11家庭中文版/16G...</p>
                <p class="price"><span class="z">￥</span class="s"><span>7499</span></p>
            </li>

            <li>
                <div class="box_img">
                    <img src="../images/Lenovotaishi3.jpg" alt="">
                </div>
                <p class="names">AIO 520一体台式机 黑色</p>
                <p class="pro-desc">RYZEN_5 5600U/Windows 11家庭中文版/27英寸16G(8Gx2)/512G...</p>
                <p class="price"><span class="z">￥</span class="s"><span>4299</span></p>
            </li>

            <li class="last">
                <div class="box_img">
                    <img src="../images/Lenovotaishi4.jpg" alt="">
                </div>
                <p class="names">天逸510S分体台式机</p>
                <p class="pro-desc">十二代英特尔酷睿i5-12400/Windows 11 家庭中文版/16G/1T+256 S...</p>
                <p class="price"><span class="z">￥</span class="s"><span>4199</span></p>
            </li>
        </ul>

    </div>


 <!--  <footer>
        <div class="foot_top">
            <ul>
            <li><a href="">关于联想</a></li>
            <li><a href="">联系我们</a></li>
            <li><a href="">工作机会</a></li>
            <li><a href="">新闻中心</a></li>
            <li><a href="">商城移动版</a></li>
            <li><a href="">EPP会员专享</a></li>
            
            <li><a href="">NBD</a></li>
            <li><a href="">懂的通信</a></li>
            <li><a href="">联想超融合</a></li>
            <li><a href=""><i style="background-position:-234px -3px;"></i> 销售网点</a></li>
            <li><a href=""><i style="background-position:-248px -3px;"></i>  服务网点</a></li>
            <li class="country"><a href="">NBD</a></li>
            </ul>
        </div>
        <div class="foot_bottom"></div>
    </footer> -->
        </div>
        </div>

<script src="../js/sousuoyinqing.js"></script>


</body>

</html>